<template>
    <div class="page" v-tabbar="{'menus': menus, menuColor: '#7c7c7c', activeMenuColor: '#0090f2', onMenuClick: menuClicked}">
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                menus: [
                    {
                        iconOn: 'ion-ios-home',
                        iconOff: 'ion-ios-home-outline',
                        text: '首页',
                        path: '/home'
                    },
                    {
                        iconOn: 'ion-ios-location',
                        iconOff: 'ion-ios-location-outline',
                        text: '目的地',
                        path: '/destination'
                    },
                    {
                        iconOn: 'ion-ios-paper',
                        iconOff: 'ion-ios-paper-outline',
                        text: '行程助手',
                        path: '/mytrip'
                    },
                    {
                        iconOn: 'ion-ios-chatbubble',
                        iconOff: 'ion-ios-chatbubble-outline',
                        text: '消息',
                        path: '/mynews'
                    },
                    {
                        iconOn: 'ion-ios-person',
                        iconOff: 'ion-ios-person-outline',
                        text: '我的',
                        path: '/mine'
                    }
                ]
            }
        },

        methods: {
            menuClicked(menuIndex) {
                console.log(menuIndex)
            }
        },

        beforeDestroy() {
            $tabbar.$emit('hideTabbar')
        }
    }
</script>

<style>
    .tabbar{
        height:49px;
        box-shadow: none;
        border: 1px solid #e3e4e5;
    }
    .tabbar .tabbar-item .icon-wrapper{
        line-height: 28px;
        font-size: 28px;
    }
    .ion-ios-person-outline,.ion-ios-person{
        font-size: 33px;
    }
</style>